{% extends "base.html" %}

{% block title %}Seiya 数据分析系统 - 同等学历不同城市薪资对比{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">首页</a></li>
        <li class="breadcrumb-item"><a href="/job">拉勾网职位数据分析</a></li>
        <li class="breadcrumb-item active" aria-current="page">同等学历不同城市薪资对比</li>
    </ol>
</nav>

<div class="my-5" id="chart"></div>
{% endblock %}

{% block js %}
<script>
$.getJSON('/job/salary-by-city-and-education.json', function (data) {
    var chart = new G2.Chart({
        container: 'chart',
        forceFit: true,
        height: 500
    });

    data.forEach(v => {
        v.salary = +v.salary.toFixed(3);
    });

    chart.source(data, {
        city: {
            range: [0, 1]
        }
    });
    chart.tooltip({
        crosshairs: {
            type: 'line'
        }
    });
    chart.axis('salary', {
        label: {
            formatter: function formatter(val) {
                return val + 'K';
            }
        }
    });
    chart.line().position('city*salary').color('education');
    chart.point().position('city*salary').color('education').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
    });

    chart.render();
});
</script>
{% endblock %}